<template>
    <div class="search">
        <div class="searchIn">
          <i class="el-icon-arrow-left" @click="$global.goPage('/mainSearch')"></i>
            <input type="text" v-model="search" @keyup.enter="dispatch"/>
            <a href="#" @click="dispatch">搜索</a>
        </div>
      <div class="result-contain">
        <h1 class="search_title" v-if="movieLoad">电影</h1><MovieList :movie-list="movie" :is-login="true" :show-sort="false" v-if="movieLoad"></MovieList>
        <h1 class="search_title" v-if="musicLoad">音乐</h1><songs-list :songs-list="music" v-if="musicLoad"></songs-list>
      </div>
      <p class="search_bottom" v-if="!(movieLoad||musicLoad)">无结果</p>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import MovieList from "../pages/movie/movieList";
    import SongsList from "../pages/music/Player/SongsList";

    export default {
      components: {SongsList, MovieList},
      data() {
        return {
          search: this.$route.query.search,
          musicLoad: false,
          movieLoad: false,
        }
      },
        beforeCreate() {
            var search = this.$route.query.search;
          this.$store.dispatch('movie/movFindByName',search)
          this.$store.dispatch('music/musicSearch',search)
        },
        methods: {
          dispatch() {
            if (!this.search.trim()) return;
            var search = this.search.trim();
            this.musicLoad = this.movieLoad = false;
            this.$store.dispatch('music/musicSearch',search)
            this.$store.dispatch('movie/movFindByName', search)
          },
        },
        computed: {
            ...mapState({
                movie: state=> state.movie.movFindByName,
                music: state=> state.music.musSearchResult
            }),
        },
      watch: {// 如果 `movie` 发生改变，这个函数就会运行
        movie: function (newValue,oldValue) {
          this.movieLoad = newValue != false;
        },
        music: function (newValue,oldValue) {
          this.musicLoad = newValue != false;
        }
      }
    }
</script>

<style lang="less">
.search {
    background-color: #fff;
    padding-bottom: 60px;
    .searchIn {
        height: 45px;
        padding: 7px 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #F2F2F2;
        display: flex;
      i{
        margin: 5px 10px;
      }
        input {
            width: 85%;
            height: 30px;
            box-sizing: border-box;
            border: none;
            background-color: #f5f5f5;
            border-radius: 3px;
            padding: 5px 8px;
            font-size: 14px;
            color: #111;
        }
        input:focus {
            outline: none;
        }
        a {
            color: #333;
            font-size: 14px;
            line-height: 30px;
            padding-left: 5%;
            height: 30px;
            width: 10%;
        }
    }
}
.result-contain{
  width: 90%;
  margin: 0 auto;
}
.search_title{
  margin: 10px;
}
.search_bottom{
  display: flex;
  margin: 30px auto;
  justify-content: center;
}
</style>
